


import { Button } from 'antd-mobile'
import React, { FC  , useState , useEffect , useRef} from 'react'
import axios from 'axios'
import _ from 'lodash'
import {connect} from 'react-redux'
import { ChangeNum, NumAdd } from '@/redux/actions'
import './index.scss'


// useState 绑定数据 
const Demo:FC<{num:Number,dispatch:any}> = ({
    num,
    dispatch 
}) => {
    var [count,changeCount] = useState<any>(2301)  // 绑定变量 
    var [flag, setFlag] = useState<Boolean>(true)
    var [list, changeList] = useState<Array<any>>([])
    var domOne = useRef<any>()   // 绑定ref

    const getListData = async ()=>{ 
        let res:any = await axios.get('http://121.196.235.163:3000/banner') 
        changeList(res.data.banners) 
    }

    // 组件载入执行 
    useEffect(()=>{
        getListData()

        domOne.current.style.fontSize= '50px'
        domOne.current.style.color= 'red'

    },[])

    return (
        <div>
            <h2 className='one1box'>Demo - Demo - Demo </h2>
            <h2 ref={domOne} >count - { count }  </h2>
            <div> num = {num} </div>
            <hr />
            <Button color='danger'  onClick={ ()=>dispatch(NumAdd()) }  >NumAdd</Button>
            <Button color='danger'  onClick={ ()=>dispatch(ChangeNum(200)) }  >change num </Button>

            <Button color='success'  onClick={ ()=>changeCount(100) }  >count=100</Button>
            <Button color='success'  onClick={ ()=>changeCount(count+100) }  >countAdd+100</Button>
            <Button color='success'  onClick={ ()=>changeCount(++count)  }  >countAdd</Button>

            <div style={{  display:flag?'block':'none', width:150,height:150,background:'#123456',color:"#fff"}}>
                Box  BOX 
            </div>
            {
                flag && <div style={{  width:150,height:150,background:'#123456',color:"#fff"}}>
                Box  BOX 1 v-if 
            </div>
            }

            {
                flag ? <div style={{  width:150,height:150,background:'#123456',color:"#fff"}}>
                Box  BOX 2 v-if 
            </div> : null 
            }

            <Button color='danger'  onClick={ ()=>setFlag(!flag)  }  >切换flag </Button>

            <div>
                {
                    _.map(list,(item,index)=>{
                        return (
                            <div key={index}>
                                <h3 >
                                    {item.typeTitle}
                                </h3>
                                <img src={item.imageUrl} style={{width:200,height:100,borderRadius:15}} alt="" />
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}

export default connect(
    (state:any)=>{
        return {
            num:state.num 
        } 
    }
)(Demo)

// connect()(Demo)